<template>
    <div class="component-manage-order-card white-bg">
        <div class="status-label" :class="[ labelColor ]">{{label}}</div>
        <div class="info-box info-box--padding">
            <div class="info-box__row">
                <div class="cover">
                    <img class="image" :src="detailIsArr ? detail[0].order_cover : cover" mode="aspectFill" />
                </div>
                <div class="info" @click="showType(orderId,orderType)">
                    <div class="title text-normal">订单ID：{{orderId}}</div>
                    <div class="title text-normal font-bold">
                        {{detailIsArr ? detail[0].good_name : descTitle}}
                    </div>
                    <div class="md text-small">
                        <div class="left">
                            <div class="buyer">
                                <div class="label">购买者</div>
                                <div class="name">{{nickname}}</div>
                            </div>
                            <div class="price">
                                <block v-if="orderStatus == 'init' || orderStatus== 'close'">
                                    未支付
                                </block>
                                <block v-else>
                                    <span>支付金额</span>
                                    <span>￥{{payPrice | currency}}元</span>
                                </block>
                            </div>
                            <div class="gery text-small">
                                {{formatCreatedAt}}
                            </div>
                        </div>
                        <div class="right">
                            <div class="label">订单状态</div>
                            <div class="status" :class="[ orderStatusText === '已完成' ? 'color-blue' : 'color-red' ]">{{orderStatusText}}</div>
                            <div v-if="mobile" class="info__mobile" @click="makeCall">
                                <span class="info__mobile-text">
                                    <i class="icon">&#xe725;</i>
                                    CALL
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="md date gery text-small" v-if="referrer">
                        <span>推荐人&nbsp;</span>
                        <span>{{referrer}}&nbsp;</span>
                        <span>{{referrerTypes[referrerLevel]}}</span>
                    </div>
                    <div class="md gery text-small">
                        <div class="">商品优惠价:¥{{oldPriceCurrency}}&nbsp;</div>
                        <div class="" v-if="isPrepay">
                            剩余尾款:¥{{lastPriceCurrency}}
                            <span class="color-red">({{final ? '已付' : '未付'}})</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <div v-if="buyerRemark" class="info-box__row info-box__remark">
                订单备注：{{buyerRemark}}
            </div>
        </div>

        <div class="info-box">
            <div class="info-box__row info-box__row-padding" v-for="(item, index) in otherDetailArr" :key="index">
                <div class="cover">
                    <img class="image" :src="item.order_cover"/>
                </div>
                <div class="info">
                    <div class="title text-normal font-bold">
                        {{item.good_name}}
                    </div>
                    <div class="md text-small">
                    </div>
                </div>
            </div>
        </div>

        <div class="btn-box clearfix" v-if="hasBtn">
            <div v-if="orderStatus == 'init' && !isFinish && (orderType === 'package' || orderType === 'prepay')" class="btn btn-mobile btn-red btn-normal" :class="[ 'btn-' + labelColor ]" @click="onClickFreeProduct">赠送产品</div>
            <div v-if="orderStatus == 'init' && !isFinish && !isMoltiProduct" class="btn btn-mobile btn-normal" :class="[ 'btn-' + labelColor ]" @click="onClickChangePrice">修改价格</div>
            <div v-if="orderStatus == 'paid' && !isFinish && final == 0" class="btn btn-mobile btn-normal" :class="[ 'btn-' + labelColor ]" @click="onClickFinal">完成订单</div>
            <div v-if="orderStatus == 'paid' && !isFinish && final == 1 && delivery == 0" class="btn btn-mobile btn-normal" :class="[ 'btn-' + labelColor ]" @click="onClickEnd1">已交货</div>
            <div v-if="orderStatus == 'paid' && !isFinish && final && delivery == 1" class="btn btn-mobile btn-normal" :class="[ 'btn-' + labelColor ]" @click="onClickDeliver">已发货</div>
            <div v-if="orderStatus == 'paid' && !isFinish && delivery == 2" class="btn btn-mobile btn-normal" :class="[ 'btn-' + labelColor ]" @click="onClickEnd2">确认收货</div>
            <div v-if="orderStatus == 'paid' && isFinish && delivery == 2" class="btn btn-mobile btn-normal">已完成</div>
            <div v-if="orderStatus == 'paid' && !isFinish && isPrepay && final" class="btn btn-mobile btn-normal" :class="[ 'btn-' + labelColor ]" @click="onClickCancel">撤销完成</div>
        </div>
    </div>
</template>

<script lang="ts">
import {
    currency,
    dateChinaFormat,
    getManageOrderStatus,
} from '@/lib/utils';
import {
    api,
} from '@/lib/api';
import store from '@/store';
import { ROUTE_NAME } from '@/lib/constant';
import { Component, Vue, Prop } from 'vue-property-decorator';

@Component({
    name: 'ManageOrderCard',
})
export default class ManageOrderCard extends Vue {
    @Prop({ type: String }) public orderId: any;
    @Prop({ type: String }) public orderKey: any;
    @Prop({ type: String }) public linkId: any;
    /** 订单数据 */
    @Prop({ type: [ Object, Array ] }) public order: any;
    /** 订单中详情数据 */
    @Prop({ type: [ Object, Array ] }) public detail: any;
    @Prop({ type: String }) public cover: any;
    @Prop({ type: String }) public title: any;
    @Prop({ type: String }) public nickname: any;
    @Prop({ type: String }) public price: any;
    @Prop({ type: String }) public originalPrice: any;
    @Prop({ type: String }) public couponPay: any;
    @Prop({ type: String }) public createdAt: any;
    @Prop({ type: String }) public referrer: any;
    @Prop({ type: String }) public referrerType: any;
    @Prop({ type: Number }) public referrerLevel: any;
    @Prop({ type: String }) public isFinish: any;
    @Prop({ type: Number }) public isPrepay: 1 | 0;
    @Prop({ type: Number }) public final: 1 | 0;
    @Prop({ type: Number }) public buyerConfirm: any;
    @Prop({ type: Number }) public delivery: any;
    @Prop({ type: String }) public orderType: any;
    @Prop({ type: String }) public orderStatus: any;
    @Prop({ type: Boolean, default: false }) public hasBtn: any;
    @Prop({ type: String, default: 'red' }) public labelColor: any;
    @Prop({ type: String }) public mobile: any;
    @Prop({ type: String }) public buyerRemark: any;

    @Prop({ type: String }) public address: any;

    @Prop({ type: [ Object, Array ] }) public gift: any;

    public orderTypeMap: any = {
        prepay: '预付订单',
        good: '全款订单',
        package: '全款订单',
    };

    public referrerTypes: any = {
        0: '普通会员',
        1: '返利会员',
        2: '城市合伙人',
        3: '商家职员',
    };

    // 
    public get giftIsArr() {
        return Array.isArray(this.gift);
    }
    public get giftListArr() {
        return this.giftIsArr ? this.gift.slice(1) : [];
    }
    // 

    public get detailIsArr() {
        return Array.isArray(this.detail);
    }

    public get isMoltiProduct() {
        return this.detailIsArr && this.detail.length > 1;
    }

    public get descTitle() {
        return this.title;
        // return this.detailIsArr && this.detail.length > 1 ? `${this.title}等${this.detail.length}件商品` : this.title;
    }

    public get label() {
        let label = '';
        if (this.orderType === 'package') {
            if (Number(this.isPrepay) === 0) {
                label += '全款订单';
            } else {
                label += '预付订单';
            }
        } else {
            if (this.delivery === 0) {
                label += '到店自取';
            } else {
                label += '物流发货';
            }
            if (Number(this.isPrepay) === 1) {
                label += '-定金支付';
            } else {
                label += '-全款支付';
            }
        }
        return label;
    }

    public get otherDetailArr() {
        return this.detailIsArr ? this.detail.slice(1) : [];
    }
    /** 折扣价格，以分为单位 */
    public get discountAmount() {
        return this.order ? this.order.discount_amount || 0 : 0;
    }

    // 商品原价
    public get oldPrice() {
        return (this.originalPrice || 0) - this.discountAmount;
    }

    public get oldPriceCurrency() {
        return currency(this.oldPrice);
    }

    // 尾款
    public get lastPrice() {
        return Number(this.oldPrice) - Number(this.price) - Number(this.couponPay);
    }

    public get lastPriceCurrency() {
        return currency(this.lastPrice);
    }

    /** 实付价格 */
    public get payPrice() {
        if (!this.isPrepay) {
            return this.price - this.discountAmount;
        }
        return this.price;
    }

    /** 订单状态文本 */
    public get orderStatusText() {
        return getManageOrderStatus(this.orderStatus, this.orderType, this.isFinish, this.final, this.delivery, this.buyerConfirm);
    }

    public get formatCreatedAt() {
        return this.createdAt ? dateChinaFormat(new Date(this.createdAt), 'Y-m-d H:i:s') : '';
    }

    public onClickFreeProduct() {
        // api.navigateTo({
        //     url: '/pages/free_product/main',
        //     query: {
        //         pkg_id: this.linkId,
        //         order_id: this.orderId,
        //     },
        // });

        api.push({
            name: ROUTE_NAME.MALL_FREE_PRODUCT,
            query: {
                pkgId: this.linkId,
                orderId: this.orderId,
            },
        });
    }

    public onClickChangePrice() {
        // api.navigateTo({
        //     url: '/pages/manage_change_price/main',
        //     query: {
        //         pkg_id: this.linkId,
        //         order_id: this.orderId,
        //         price: this.oldPriceCurrency,
        //         isPrepay: this.isPrepay === 1 ? 'true' : 'false',
        //     },
        // });

        api.push({
            name: ROUTE_NAME.MANAGE_CHANGE_PRICE,
            query: {
                pkg_id: this.linkId,
                order_id: this.orderId,
                price: this.oldPriceCurrency,
                isPrepay: this.isPrepay === 1 ? 'true' : 'false',
            },
        });
    }

    public onClickFinal() {
        const vm = this;
        wx.showModal({
            title: '余款是否已结清?',
            confirmText: '确认',
            success(res: any) {
                if (res.confirm) {
                    vm.finalPayment();
                } else if (res.cancel) {
                }
            },
        });
    }

    /**
     * 确认尾款已收
     */
    public async finalPayment() {
        store.commit('utils/startRequest');
        await store.dispatch('manage/finalPayment', {
            orderId: this.orderId,
        });
        // if (res.statusCode === 200 && res.data.status === 0) {
        //     this.$emit('resetOrderList');
        // }
        store.commit('utils/endRequest');
    }

    public async onClickEnd1() {
        wx.showModal({
            title: '提示',
            content: '是否确认交货',
            success: async (res: any) => {
                if (res.confirm) {
                    store.commit('utils/startRequest');
                    await store.dispatch('manage/endOrder', {
                        orderId: this.orderId,
                    });
                    store.commit('utils/endRequest');
                }
            },
        });
    }

    public async onClickEnd2() {
        store.commit('utils/startRequest');
        await store.dispatch('manage/endOrder', {
            orderId: this.orderId,
        });
        store.commit('utils/endRequest');
    }

    public async onClickDeliver() {
        store.commit('utils/startRequest');
        await store.dispatch('manage/hasDeliver', {
            orderId: this.orderId,
        });
        store.commit('utils/endRequest');
    }

    public async onClickCancel() {
        store.commit('utils/startRequest');
        await store.dispatch('manage/cancelFinalPayOrder', {
            orderId: this.orderId,
        });
        store.commit('utils/endRequest');
    }

    /**
     * 拨打电话
     */
    public makeCall() {
        wx.makePhoneCall({
            phoneNumber: this.mobile,
        });
    }

    // 显示订单信息
    public showType(orderId,orderType){
        var data = {
            orderId,
            orderType
            
        }
        this.$emit('showType',data)
    }
}
</script>

<style lang="less">
@import "../../lib/style/mixins.less";

.component-manage-order-card {
    padding: 0 7px;
    margin-bottom: 12px;
    position: relative;
    border-radius: 5px;
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 1);
    .status-label {
        position: absolute;
        left: -5px;
        top: 5px;
        padding: 0 5px;
        line-height: 15px;
        color: #ffffff;
        font-size: 12px;
        text-align: center;
        box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.4);
        &.red {
            background-color: rgba(244, 5, 26, 1);
            border: 1px solid rgba(244, 5, 26, 1);
        }
        &.blue {
            background-color: rgba(40, 141, 248, 1);
            border: 1px solid rgba(40, 141, 248, 1);
        }
    }
    .info-box {
        &--padding {
            padding: 14px 7px 8px;
        }
        &__row {
            display: flex;
            &--padding {
                padding: 14px 7px 8px;
            }
        }
        &__remark {
            padding-top: 5px;
            .text-small();
            color: #9b9b9b;
        }
        // justify-content: space-between;
        .cover {
            width: 78px;
            height: 112px;
            .image {
                width: 100%;
                height: 100%;
            }
        }
        .info {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding: 24rpx 0 10rpx 10px;
            .md {
                display: flex;
                .left {
                    width: 140px;
                    color: #9b9b9b;
                    .buyer,
                    .price {
                        display: flex;
                        .label {
                            width: 60px;
                        }
                    }
                }
                .right {
                }
            }
            .text-normal {
                line-height: 34rpx;
            }
            &__mobile {
                color: @color-white;
                .icon {
                    display: inline-block;
                    width: 22px;
                    height: 22px;
                    font-size: 16px;
                    line-height: 22px;
                    background-color: #bbbbbb;
                    border-radius: 50%;
                    text-align: center;
                }
                &-text {
                    display: inline-block;
                    padding-right: 4px;
                    .text-small();
                    background-color: #298DF8;
                    border-radius: 12px;
                }
            }
        }
    }
    .btn-box {
        border-top: 1px solid #F2F2F2;
        padding: 10px 0;
        .btn {
            float: left;
            width: 200rpx;
            text-align: center;
            margin-right: 24px;
            border-radius: 10rpx;
        }
    }
    .gery {
        color: #9b9b9b;
    }
}

</style>
